﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>写文章</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }

        .Zheng {
            height: 700px;
            resize: vertical;
        }

        .input-group {
            margin-bottom: 20px;
        }

        input[type="text"], textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .tags-container {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .tag {
            background: #f0f0f0;
            padding: 4px 8px;
            border-radius: 12px;
            display: flex;
            align-items: center;
        }

        .cover-upload {
            border: 1px dashed #ddd;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }

        .title-window {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }

        .counter {
            color: #666;
            font-size: 12px;
        }

        .input-center {
            margin-left: 50%;
        }

        .an {
            padding: 3%;
            font-size: 15px;
        }

        .validation-message {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 4px;
            display: block;
        }

        .cover-upload img {
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id = "articleForm" }))
        {
            @Html.AntiForgeryToken()
            
            <div class="input-group">
                <h4>分类专栏</h4>
                <select name="categories" id="categories" required>
                    <option value="">请选择</option>
                    <option value="1">艺术</option>
                    <option value="2">文学</option>
                    <option value="3">体育</option>
                    <option value="4">生活</option>
                </select>
                <span class="validation-message">@Html.ValidationMessage("categories")</span>
            </div>

            <div class="input-group">
                <input type="text"
                       name="title"
                       id="article-title"
                       placeholder="请输入文章标题（5~100个字）"
                       maxlength="100"
                       required>
                <span class="validation-message">@Html.ValidationMessage("title")</span>
                <textarea name="substance" 
                          class="Zheng" 
                          id="content"
                          placeholder="请在此处编辑正文内容"
                          required></textarea>
                <span class="validation-message">@Html.ValidationMessage("substance")</span>
            </div>

            @*<div class="input-group">
                <h4>文章标签</h4>
                <div class="tags-container" id="tagsContainer"></div>
                <button onclick="addTag()" type="button">+ 添加文章标签</button>
                <input type="hidden" name="tags" id="tagsInput" />
            </div>*@

            @*<div class="input-group">
                <h4>添加封面</h4>
                <div class="cover-upload" onclick="document.getElementById('coverInput').click()">
                    <span id="coverText">+ 点击上传封面</span>
                    <input type="file" id="coverInput" name="coverImage" hidden accept="image/*">
                </div>
                <div class="title-window">
                    <button type="button" onclick="selectCover('hot')">热门</button>
                    <button type="button" onclick="selectCover('vip')">VIP</button>
                    <button type="button" onclick="document.getElementById('coverInput').click()">本地上传</button>
                </div>
            </div>

            <div class="input-group">
                <h4>文章摘要</h4>
                <textarea name="summary" 
                          id="summary" 
                          rows="4" 
                          maxlength="255"
                          placeholder="请输入文章摘要（可选）"></textarea>
                <div class="counter">
                    <span id="charCount">0</span>/255
                    <button type="button" onclick="autoFillSummary()">自动填充</button>
                </div>
            </div>*@

            <div class="input-center">
                <button type="submit" class="an">发表</button>
            </div>
        }
    </div>


    <script>
        let tags = []; // 存储标签数组

        // 标签管理
        function addTag() {
            const tagName = prompt("请输入标签名称：");
            if (tagName && tagName.trim()) {
                const trimmedTag = tagName.trim();
                if (!tags.includes(trimmedTag)) {
                    tags.push(trimmedTag);
                    updateTagsDisplay();
                    updateTagsInput();
                } else {
                    alert("标签已存在！");
                }
            }
        }

        // 更新标签显示
        function updateTagsDisplay() {
            const container = document.getElementById('tagsContainer');
            container.innerHTML = '';
            tags.forEach(tag => {
                const tagElement = document.createElement('div');
                tagElement.className = 'tag';
                tagElement.innerHTML = `
                    ${tag}
                    <span style="margin-left:5px;cursor:pointer" onclick="removeTag('${tag}')">×</span>
                `;
                container.appendChild(tagElement);
            });
        }

        // 移除标签
        function removeTag(tagName) {
            tags = tags.filter(tag => tag !== tagName);
            updateTagsDisplay();
            updateTagsInput();
        }

        // 更新隐藏的标签输入字段
        function updateTagsInput() {
            document.getElementById('tagsInput').value = tags.join(',');
        }

        // 自动填充摘要
        function autoFillSummary() {
            const content = document.getElementById('content').value;
            if (content) {
                // 提取前255个字符作为摘要
                const summary = content.substring(0, 255);
                document.getElementById('summary').value = summary;
                updateCharCount();
            }
        }

        // 字数统计
        document.getElementById('summary').addEventListener('input', updateCharCount);
        function updateCharCount() {
            const count = document.getElementById('summary').value.length;
            document.getElementById('charCount').textContent = count;
        }

        // 封面图片预览
        document.getElementById('coverInput').addEventListener('change', function (e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    const coverUpload = document.querySelector('.cover-upload');
                    coverUpload.innerHTML = `
                        <img src="${e.target.result}" style="max-width: 200px; max-height: 150px; object-fit: cover;">
                        <div style="margin-top: 10px; font-size: 12px; color: #666;">点击更换图片</div>
                    `;
                }
                reader.readAsDataURL(file);
            }
        });

        // 选择预设封面
        function selectCover(type) {
            alert(`选择了${type === 'hot' ? '热门' : 'VIP'}封面（功能待实现）`);
        }

        // 表单提交前验证
        document.getElementById('articleForm').addEventListener('submit', function(e) {
            const title = document.getElementById('article-title').value.trim();
            const content = document.getElementById('content').value.trim();
            const categories = document.getElementById('categories').value;

            if (!title) {
                e.preventDefault();
                alert('请输入文章标题！');
                return false;
            }

            if (title.length < 5) {
                e.preventDefault();
                alert('文章标题至少需要5个字符！');
                return false;
            }

            if (!content) {
                e.preventDefault();
                alert('请输入文章内容！');
                return false;
            }

            if (!categories) {
                e.preventDefault();
                alert('请选择文章分类！');
                return false;
            }

            // 更新标签输入
            updateTagsInput();
        });

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateCharCount();
        });
    </script>
</body>
</html>
